<template>
  <div>
    <div class="testmsg">
      <p>接受的消息</p>
      <el-button type="primary">666</el-button>
      <div class="msg">{{ msg }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  created(){
      this.getTestMsg();
  },
  methods: {
    async getTestMsg() {
      const res = await this.$http.get("test/task1", "国牛");
      this.msg = res.data.data;
    },
  },
};
</script>

<style lang="less" scoped>
.testmsg {
  width: 500px;
  height: 300px;
  background-color: #eee;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
}
.msg {
    width: 100%;
    height: 55%;
    display: flex;
    font-size: 26px;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: rgb(23, 172, 35);
}
</style>